<template>
  <view class="container">
    <view class="left-bottom-sign"></view>
    <view class="right-top-sign"></view>
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">
      <view class="left-top-sign">鸿善智家</view>
      <view class="input-content">
        <!-- <view class="input-item">
          <text class="tit">身份证号码</text>
          <input type="text" :value="mobile" placeholder="您的身份证号码" maxlength="18" data-key="mobile" @input="inputChange" />
        </view> -->
        <view class="input-item">
          <text class="tit">手机号</text>
          <input type="text" :value="mobile" placeholder="您的手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
        </view>
        <view class="input-item relative">
          <text class="tit">验证码</text>
          <input type="text" :value="verifycode" placeholder="短信验证码" data-key="verifycode" @input="inputChange" />
          <button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
        </view>
        <view class="input-item">
          <text class="tit">真实姓名</text>
          <input type="text" :value="realname" placeholder="真实姓名" maxlength="8" data-key="realname" @input="inputChange" />
        </view>
        <view class="input-item">
          <text class="tit">登录密码</text>
          <input type="text" :value="pwd" placeholder="请输入登录密码" placeholder-class="input-empty" maxlength="20" password
            data-key="pwd" @input="inputChange" />
        </view>
        <view class="input-item">
          <text class="tit">确认登录密码</text>
          <input type="text" :value="pwd1" placeholder="请确认登录密码" placeholder-class="input-empty" maxlength="20"
            password data-key="pwd1" @input="inputChange" />
        </view>
        <view class="input-item">
          <text class="tit">邀请人ID</text>
          <input type="number" :value="inid" placeholder="请输入邀请人ID" maxlength="11" disabled data-key="inid" @input="inputChange" />
        </view>
        <view class="input-item">
          <text class="tit">上级ID</text>
          <input type="number" :value="agentid" placeholder="上级ID" maxlength="11" disabled data-key="agentid" @input="inputChange" />
        </view>

      </view>
      <u-button class="confirm-btn" style="background-color: #d01819;" @click="register" throttle-time="2000">立即注册</u-button>
    </view>
    <!-- <view class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view> -->
    <!-- <view class="action-row">
			<navigator url="../reg/reg">注册账号</navigator>
			<text>|</text>
			<navigator url="../pwd/pwd">忘记密码</navigator>
		</view> -->

    <view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">温馨提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">注册成功~您的登录ID是：{{userId}}</view>
        <view class="cu-bar bg-white justify-end">
          <view class="action click-list" style="width: 100%;justify-content: space-between;padding: 0 80rpx;">
            <button class="click-btn cu-btn line-green text-green" style="color: #E25151;" @tap="ctrlC">点击复制</button>
            <button class="click-btn cu-btn bg-green" style="background-color: #E25151;" @tap="goPage">确认跳转</button>

          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        mobile: '',
        
        verifycode: '',
        codetext: '获取验证码',
        codebtn: false,
        imgcode: '',
        codenum: 60,
        
        realname: '',
        pwd: '',
        pwd1: '',
        agentid: "",
        inid: "",
        modalName: null,
        userId: '',
      }
    },
    onLoad: function(e) {
      this.agentid = e.agentid;
      this.inid = uni.getStorageSync("mid");
      console.log(e, this.agentid, '查看传进来的值')
    },
    methods: {
      inputChange(e) {
        const key = e.currentTarget.dataset.key;
        this[key] = e.detail.value;
      },
      getcode() {
      	if (this.mobile == "") {
      		return uni.showToast({
      			title: '请输入手机号',
      			icon: "none"
      		});
      	}  else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile))) {
          return uni.showToast({
            title: '请输入正确的手机号码',
            icon: "none"
          });
        }
      	// else if (this.imgcode == "") {
      	// 	uni.showToast({
      	// 		title: '请输入图形验证码',
      	// 		icon: "none"
      	// 	});
      	// } 
      	else {
      		uni.request({
      			url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
      			method: 'POST',
      			data: {
      				mobile: this.mobile,
      				temp: 'sms_reg',
      				imgcode: this.imgcode
      			},
      			header: {
      				'Content-Type': 'application/x-www-form-urlencoded'
      			},
      			success: res => {
      				uni.showToast({
      					title: res.data.result.message,
      					icon: "none"
      				});
      				if (res.data.status == 1) {
      					this.codebtn = true
      					var codetexts = setInterval(() => {
      						this.codenum = this.codenum - 1
      						this.codetext = this.codenum + 's'
      					}, 1000)
      					setTimeout(() => {
      						this.codebtn = false
      						clearInterval(codetexts);
      						this.codetext = '重新发送'
      					}, 60000)
      				}
      			},
      			fail: () => {},
      			complete: () => {}
      		});
      	}
      },
      async register() {
        let that = this;
        if (this.mobile == "") {
          return uni.showToast({
            title: '请输入手机号码',
            icon: "none"
          });
        } else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile))) {
          return uni.showToast({
            title: '请输入正确的手机号码',
            icon: "none"
          });
        }
        //  else if (!(
        //     /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
        //     .test(this.mobile))) {
        //   return uni.showToast({
        //     title: '请输入正确的身份证号码',
        //     icon: "none"
        //   });
        // }
        else if (this.realname == "") {
          return uni.showToast({
            title: '请输入真实姓名',
            icon: "none"
          });
        } else if (this.pwd == "") {
          return uni.showToast({
            title: '请输入登录密码',
            icon: "none"
          });
        } else if (this.pwd1 == "") {
          return uni.showToast({
            title: '请确认登录密码',
            icon: "none"
          });
        } else if (this.pwd != this.pwd1) {
          return uni.showToast({
            title: '两次密码不一致~',
            icon: "none"
          });
        } else if (this.verifycode == "") {
          return uni.showToast({
            title: '请输入验证码',
            icon: "none"
          });
        } else {
          let data = {
            mobile: this.mobile,
            verifycode: this.verifycode,
            realname: this.realname,
            type: 0,
            agentid: this.agentid,
            pwd: this.pwd,
            pwd1: this.pwd1,
            inid: this.inid,
          }
          let res = await this.$myRequest({
            url: "/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.register&app=1",
            method: "POST",
            data,
          })
          console.log(res)
          if (res.data.status == 0) {
            return uni.showToast({
              title: res.data.result.message,
              icon: 'none',
            });
          } else if (res.data.status == 1) {
            let arr = res.data.result.message.split('：')
            that.userId = arr[arr.length - 1];
            console.log('查看用户id', that.userId)
            that.showModal();
          }
        }
      },

      showModal(e) {
        this.modalName = 'DialogModal1'

      },
      hideModal(e) {
        this.modalName = null
      },
      goPage() {
        uni.redirectTo({
          url: './team'
        })
      },
      ctrlC() {
        uni.setClipboardData({
          data: this.userId,
          success: () => {
            uni.showToast({
              title: '复制成功~'
            });
          }
        });
      },
    },
  }
</script>

<style lang='scss'>
  @import "/colorui/main.css";
  @import "/colorui/icon.css";

  page {
    background: #fff;
  }

  .action-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: $uni-color-error;
    font-size: 26upx;
  }

  .action-row navigator {
    color: $uni-color-error;
    padding: 0 10px;
  }

  .container {
    padding-top: 100rpx;
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff;
  }

  .wrapper {
    position: relative;
    z-index: 90;
    background: #fff;
  }

  .back-btn {
    position: absolute;
    left: 40upx;
    z-index: 9999;
    padding-top: var(--status-bar-height);
    top: 40upx;
    font-size: 40upx;
    /* color: $font-color-dark; */
  }

  .left-top-sign {
    font-size: 120upx;
    color: #f3f3f3;
    position: relative;
    left: 50upx;
    top: -40upx;
  }

  .right-top-sign {
    position: absolute;
    top: 80upx;
    right: -30upx;
    z-index: 95;

    &:before,
    &:after {
      display: block;
      content: "";
      width: 400upx;
      height: 80upx;
      background: #b4f3e2;
    }

    &:before {
      transform: rotate(50deg);
      border-radius: 0 50px 0 0;
    }

    &:after {
      position: absolute;
      right: -198upx;
      top: 0;
      transform: rotate(-50deg);
      border-radius: 50px 0 0 0;
      /* background: pink; */
    }
  }

  .left-bottom-sign {
    position: absolute;
    left: -270upx;
    bottom: -320upx;
    border: 100upx solid #d0d1fd;
    border-radius: 50%;
    padding: 180upx;
  }

  .welcome {
    position: relative;
    left: 50upx;
    top: -90upx;
    font-size: 46upx;
    color: #555;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
  }

  .input-content {
    padding: 0 60upx;
  }

  .input-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 30upx;
    background: #f8f6fc;
    height: 120upx;
    border-radius: 4px;
    margin-bottom: 50upx;

    &:last-child {
      margin-bottom: 0;
    }

    .tit {
      height: 50upx;
      line-height: 56upx;
      font-size: 26upx;
      color: #606266;
    }

    input {
      height: 60upx;
      font-size: 30upx;
      color: #303133;
      width: 100%;
    }
  }

  .confirm-btn {
    width: 630upx;
    height: 76upx;
    line-height: 76upx;
    border-radius: 50px;
    margin: 70upx auto;
    background: $uni-color-error;
    color: #fff;
    font-size: 32upx;

    &:after {
      border-radius: 100px;
    }
  }

  .forget-section {
    font-size: 26upx;
    color: #4399fc;
    text-align: center;
    margin-top: 40upx;
  }

  .register-section {
    position: absolute;
    left: 0;
    bottom: 50upx;
    width: 100%;
    font-size: 26upx;
    color: #606266;
    text-align: center;

    text {
      color: #4399fc;
      margin-left: 10upx;
    }
  }
  .inputright {
    position: absolute;
    right: 0;
    bottom: 0;
  	width: 200upx;
  	height: 70upx;
  	line-height: 70upx;
  	font-size: 24upx;
  	background: #eee;
  	color: #aaa;
  	border: 2upx solid #fff;
  }
</style>
